<template>
  <div class="container">
    <mu-tabs :value="activeTab" @change="handleTabChange">
      <mu-tab value="tab1" title="检验报告"/>
      <mu-tab value="tab2" title="检查报告"/>
    </mu-tabs>
    <div class="search-container infinite-container" style="top:50px;">
        <div class="search-box">
           <search-bar @search="searchHandle" placeholder="请输入身份证号" ref="searchbar"></search-bar>
        </div>
       
          <div class="bgwhite" v-if="drugs.length > 0" style="margin-top:56px;">

            <mu-flexbox class="t3" :gutter="0">
              <mu-flexbox-item >
                 {{activeTab === 'tab1' ? '项目名称' : '药品名称'}}
              </mu-flexbox-item>
              <mu-flexbox-item >
                 {{activeTab === 'tab1' ? '报告科室' : '价格(元)'}}
              </mu-flexbox-item>
              <mu-flexbox-item >
               {{activeTab === 'tab1' ? '报告时间' : '规格'}}
              </mu-flexbox-item>
              <mu-flexbox-item v-if="activeTab === 'tab2'" >
                产地
              </mu-flexbox-item>
            </mu-flexbox>
            <mu-divider />

            <template v-for="(dept, i) in drugs">
              <mu-flexbox  :key="i" @click.native="clickHandle(dept)">
                <mu-flexbox-item >
                  {{activeTab === 'tab1' ? dept.reportName : dept.drugName}}
                </mu-flexbox-item>
                <mu-flexbox-item >
                  {{activeTab === 'tab1' ? dept.reportDept : dept.retailPrice}}
                </mu-flexbox-item>
                <mu-flexbox-item >
                  {{activeTab === 'tab1' ? dept.reportDate : dept.specifications}}
                </mu-flexbox-item>
                <mu-flexbox-item v-if="activeTab === 'tab2'">{{dept.placeOrigin}}</mu-flexbox-item>
              </mu-flexbox>
              <mu-divider :key="i" />
            </template>
          </div>

          <!-- <div class="not-found" v-else>
            <div>暂无数据</div>
          </div> -->
 
          
          
        </div>

    <!-- <div class="text-warning fixed-bottom f12 text-center" style="height:30px;padding:5px 0;">
            <img class="v-middle" src="../../assets/images/icon_0201_wjcx_act.png" width="14"/>
             价格信息仅供参考，如有变动，以门诊、住院处公布为准
          </div> -->
    
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import { commonAjax, RESTFUL_API } from '@/api/api'
export default {
  components: {SearchBar},
  data () {
    return {
      drugs: [],
      activeTab: 'tab1',
      pageNo: 1,
      pageSize: 20,
      testData: [
        {
          reportName: '血常规',
          reportDate: '2019-03-13',
          type: 1,
          reportDept: '血液科'
        },
        {
          reportName: 'GE E-8彩超',
          reportDate: '2019-03-13',
          type: 2,
          reportDept: '超声科'
        }
      ]
    }
  },
  mounted () {
    // this.listLeafDepartment()
  },
  methods: {
    handleTabChange (val) {
      this.activeTab = val
      this.drugs = []
      this.$refs.searchbar.clearValue()
    },
    searchHandle (val) {
      if (!val) {
        this.drugs = []
        return
      }
      if (this.activeTab === 'tab1') {
        this.$router.push('jyList')
      } else {
        this.$router.push('jcList')
      }
      // this.queryTreatment(val)
    },
    queryTreatment (query) {
      // let params = {
      //   query: query,
      //   pageNo: this.pageNo,
      //   pageSize: this.pageSize
      // }
      this.$store.commit('UPDATE_LOADING')
      setTimeout(() => {
        this.$store.commit('UPDATE_LOADING')
        this.drugs = this.testData
      }, 1200)
      // commonAjax(`${RESTFUL_API.queryTreatment}`, params).then(res => {
      //   this.$store.commit('UPDATE_LOADING')
      //   if (res.data.code === 1) {
      //     this.drugs = res.data.data
      //   }
      // })
    },
    clickHandle (dept) {
      if (dept.type === 1) {
        this.$router.push('/mainReportRecord/jyDetail')
      } else {
        this.$router.push('/mainReportRecord/jcDetail')
      }
    },
    queryDrugs (query) {
      let params = {
        query: query,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax(`${RESTFUL_API.queryDrugs}`, params).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.drugs = res.data.data
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

.search-container{
  top: 54px;
  .mu-flexbox-item{
    padding: 1em;
    text-align: center;
  }
}
</style>
